// 导入 useState 的函数
import React, { useState } from 'react';

// 定义一个组件-函数组件
export const Counter = () => {
  // 和状态挂钩🪝
  const [count, setCount] = useState(1);
  // 字符串
  const [name, setName] = useState('Jack');
  // 数组类型
  const [likes, setLikes] = useState(['吃饭', '睡觉', '敲代码']);
  // 对象
  const [obj, setObj] = useState({ name: 'Rose', age: 18 });
  // UI，JSX，React 元素
  const [jsx, setJsx] = useState(<div>我是useState引入的div</div>);

  // 箭头函数表达式
  const handleClick = (e) => {
    console.log(e);
    // 修改组件状态，要通过 setCount 函数
    // count = 10; // 不能直接修改
    // setCount(10);
    setCount(count + 1);
  };

  //   function handleClick(e) {
  //     console.log(e);
  //     setCount(count + 1);
  //   }
  // 函数定义表达式
  //   const handleClick = function (e) {
  //     console.log(e);
  //     setCount(count + 1);
  //   };

  return (
    <div>
      <h3>我是使用hooks的组件</h3>
      <h1>{count}</h1>
      <button onClick={handleClick}>+1</button>
      <hr />
      <h1>{name}</h1>
      <button
        onClick={() => {
          setName('Rose');
        }}
      >
        改name
      </button>
      <hr />
      <h1>{likes.join(',')}</h1>
      <button
        onClick={() => {
          console.log(likes);
          likes[0] = '喝水';
          console.log(likes);
          console.log(likes === likes);
          const likes2 = [...likes];
          console.log(likes2 === likes);
          // 修改数据了
          setLikes(likes2);
        }}
      >
        改爱好
      </button>
      <hr />
      <h1>
        {obj.name}, {obj.age}
      </h1>
      <button
        onClick={() => {
          setObj({ ...obj, name: 'Alice', age: 28 });
          // setObj(Object.assign({}, obj, { age: 28 }));
          // 错误的方式
          // obj.name = 'Alice';
          // setObj(obj);
        }}
      >
        改对象
      </button>
      <hr />
      {jsx}
      <button
        onClick={() => {
          setJsx(<div>修改后的JSX</div>);
        }}
      >
        改JSX
      </button>
    </div>
  );
};
